<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    @close="close"
  >
    <el-form ref="userForm" :model="userForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名称" prop="name">
        <el-input v-model="userForm.name" />
      </el-form-item>
      <el-form-item label="选择角色" prop="roleId">
        <el-select 
          v-model="userForm.roleId" 
          placeholder="请选择活动区域" 
          style="width:100%"
        >
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      
    </el-form>

    <div class="el-form-item is-required">
      <label class="el-form-item__label" style="width: 100px;">上传头像</label>
      <div class="el-form-item__content" style="margin-left: 100px;">
        <single-upload
          ref="sinpleUpload"
          :error-style="errorStyle"
          :action="action"
          :img="userForm.headImg"
          :headers="headers"
          @uploadSuccess="uploadSuccess"
          @uploadRemove="uploadRemove"
        />
        <div v-show="headImgError" class="el-form-item__error">
          请上传头像
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button plain @click="resetForm('userForm')">重 置</el-button>
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitForm('userForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import SingleUpload from '@/components/SingleUpload/index.vue'
import { findRoles } from '@/api/role'
import { getToken } from '@/util/token-utils'
export default {
  components: {
    SingleUpload
  },
  computed: {
    title: function() {
      // 监听父组件传递的 id
      if (this.userForm.id === '') {
        return '添加用户'
      } else {
        return '修改用户'
      }
    }
  },
  props: {
    userForm: {
      type: Object,
      default: () => {
        return {
          name: '',
          roleId: '',
          headImg: '',
          id: ''
        }
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      // 不直接绑定，因为会有JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除
      action: 'http://localhost:8080/sys/file/upload',
      errorStyle: false,
      headers: {
        QianYuanToken: getToken()
      },
      headImgError: false,
      roles: [],
      rules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    uploadSuccess(res) {
      this.userForm.headImg = res.url
      this.headImgError = false
      this.errorStyle = false
    },
    uploadRemove() {
      this.userForm.headImg = ''
    },
    close() {
      this.resetForm('userForm')
      this.userForm.id = ''
    },
    closeDialog() {
      this.dialogVisible = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.headImgError = false
      this.errorStyle = false
      this.userForm.headImg = ''
    },
    submitForm(formName) {
      const hasHeadImg = this.userForm.hasOwnProperty('headImg')
      if (!hasHeadImg) {
        this.headImgError = true
        this.errorStyle = true
      }
      if (hasHeadImg && this.userForm.headImg !== '') {
        this.headImgError = false
        this.errorStyle = false
      } else {
        this.headImgError = true
        this.errorStyle = true
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.userForm.headImg === '') {
            return
          }
          this.$emit('addUser', this.userForm)
        } else {
          return false
        }
      })
    }
  },
  created() {
    findRoles().then(res => {
      this.roles = res.data
    })
  }
}
</script>

